import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
import { ModalRef, ModalService } from '@iux/live';

@Component({
  templateUrl: './customize.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomizeComponent {
  constructor(private modalService: ModalService) {}

  contentComponent = ModalCustomComponent;

  @ViewChild('contentTpl', { static: false }) contentTpl: TemplateRef<any>;

  @ViewChild('headerTpl', { static: false }) headerTpl: TemplateRef<any>;

  openTpl() {
    this.modalService.create({
      lvModalKey: 'myModal1',
      lvHeader: this.headerTpl,
      lvContent: this.contentTpl,
      lvWidth: 600,
    });
  }

  openComponent() {
    this.modalService.create({
      lvModalKey: 'myModal2',
      lvHeader: 'modal',
      lvContent: this.contentComponent,
      lvComponentParams: {
        title: 'param',
      },
      lvWidth: 600,
      lvFocusButtonId: 'ok',
      lvOk: modal =>
        new Promise<void>(resolve => {
          setTimeout(() => {
            resolve();
          }, 1000);
        }),
    });
  }

  openBtn() {
    this.modalService.create({
      lvModalKey: 'myModal3',
      lvHeader: 'modal',
      lvContent: this.contentComponent,
      lvComponentParams: {
        title: 'param',
        customBtn: true,
      },
      lvWidth: 600,
      lvFocusButtonId: 'customOk',
      /*
        自定义内容里面调用了modal.close()，该方法无参数时，lvAfterClose的参数值为null，不能使用解构获取trigger,注释的lvAfterClose为错误示范，会导致lvAfterClose调用无法执行
          1.lvAfterClose形参不使用解构
          2.如果需要区分关闭的触发条件，建议modal.close({trigger:'XXX'})
      */
      lvAfterClose: result => {
        console.log(result);
      },
      lvFooter: [
        {
          id: 'customCancel',
          label: 'Custom Cancel',
          onClick: modal => {
            modal.close();
          },
        },
        {
          id: 'customOk',
          label: 'Custom OK',
          type: 'primary',
          loadingText: 'loading...',
          onClick: (modal, button) => {
            button.loading = true;
            setTimeout(() => {
              button.loading = false;
              modal.close();
            }, 1000);
          },
        },
      ],
    });
  }
}

@Component({
  selector: 'modal-custom-component',
  template: `
    <div>
      <div style="margin-top:20px;">
        <p>custom content Component</p>
        <p>custom Footer button</p>
        <p style="margin-top:30px;"></p>
        <lv-group lvGutter="16px">
          <button lv-button (click)="triggerOk()">Trigger Ok</button>
          <button lv-button (click)="disableOk()">{{ disableOkText }}</button>
        </lv-group>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalCustomComponent {
  constructor(private modal: ModalRef) {}

  @Input() title = '';

  @Input() customBtn = false;

  disableOkText = 'Disable Ok';

  triggerOk() {
    const ins = this.modal.getInstance();
    if (this.customBtn) {
      if (ins.footerButtons[1].disabled) return;
      this.modal.triggerCustomButton('customOk');
    } else {
      if (ins.lvOkDisabled) return;
      this.modal.triggerOk();
    }
  }

  disableOk() {
    const ins = this.modal.getInstance();
    if (this.customBtn) {
      if (ins.footerButtons[1].disabled) {
        ins.footerButtons[1].disabled = false;
        ins.footerButtons[1].tips = '';
        this.disableOkText = 'Disable Ok';
      } else {
        ins.footerButtons[1].disabled = true;
        ins.footerButtons[1].tips = 'This Ok button is disabled.';
        this.disableOkText = 'Enable Ok';
      }
    } else if (ins.lvOkDisabled) {
      ins.lvOkDisabled = false;
      ins.lvOkTips = '';
      this.disableOkText = 'Disable Ok';
    } else {
      ins.lvOkDisabled = true;
      ins.lvOkTips = 'This Ok button is disabled.';
      this.disableOkText = 'Enable Ok';
    }
  }
}
